<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <meta name="description" content="xxx" />
    <style>
      /* reset */
      /*
        1. 内联样式 / * / *
        2. 任何两个标签 都可以 有完全一样的 样式
        3. 任何一个标签都有特定的语义, 每个标签在浏览器中都有默认的样式
        4. Flex 布局 和 Grid 布局
        5. 样式的继承
        6. 样式的叠加
        7. CSS 的样式分类
           7.1 布局 / 定位
        8. hack / workaround
        9. display vs position
        10. 子绝, 父相
        11. https://learn-htmlcss.vercel.app/lessons/layout.html
      */
      body {
        /* font-weight: 800; */
      }
      * {
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
      }
      .product-list {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
      }
      .product-list li {
        /* 相对父元素的宽度 */
        width: 200px;
      }
    </style>
  </head>
  <body>
    <!-- Product List -->
    <!--
      1. 内容
      2. 结构
      3. DOM
      4. 语义 sematic
     -->
    <ul class="product-list">
      <li>
        <h2>Lorem ipsum dolor sit amet.</h2>
        <h5>Lorem ipsum dolor sit amet consectetur.</h5>
        <div>
          <figure>
            <img src="./assets/gongzhu.jpeg" alt="" />
          </figure>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            voluptatum, voluptate, quibusdam, quia voluptas quod quos
            voluptatibus quae doloribus quas voluptatem. Quisquam voluptatum,
            voluptate, quibusdam, quia voluptas quod quos voluptatibus quae
            doloribus quas voluptatem.
          </p>
        </div>
      </li>
      <li>
        Lorem ipsum dolor sit amet.

        <div>
          <figure>
            <img src="./assets/gongzhu.jpeg" alt="" />
          </figure>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            voluptatum, voluptate, quibusdam, quia voluptas quod quos
            voluptatibus quae doloribus quas voluptatem. Quisquam voluptatum,
            voluptate, quibusdam, quia voluptas quod quos voluptatibus quae
            doloribus quas voluptatem.
          </p>
        </div>
      </li>
      <li>
        Lorem ipsum dolor sit amet.

        <div>
          <figure>
            <img src="./assets/gongzhu.jpeg" alt="" />
          </figure>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            voluptatum, voluptate, quibusdam, quia voluptas quod quos
            voluptatibus quae doloribus quas voluptatem. Quisquam voluptatum,
            voluptate, quibusdam, quia voluptas quod quos voluptatibus quae
            doloribus quas voluptatem.
          </p>
        </div>
      </li>
      <li>
        Lorem ipsum dolor sit amet.

        <div>
          <figure>
            <img src="./assets/gongzhu.jpeg" alt="" />
          </figure>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            voluptatum, voluptate, quibusdam, quia voluptas quod quos
            voluptatibus quae doloribus quas voluptatem. Quisquam voluptatum,
            voluptate, quibusdam, quia voluptas quod quos voluptatibus quae
            doloribus quas voluptatem.
          </p>
        </div>
      </li>
      <li>
        Lorem ipsum dolor sit amet.

        <div>
          <figure>
            <img src="./assets/gongzhu.jpeg" alt="" />
          </figure>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            voluptatum, voluptate, quibusdam, quia voluptas quod quos
            voluptatibus quae doloribus quas voluptatem. Quisquam voluptatum,
            voluptate, quibusdam, quia voluptas quod quos voluptatibus quae
            doloribus quas voluptatem.
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>
